{extend name="layout/base" /}
<!-- 标题 -->
{block name="title"}管理首页{/block}
<!-- CSS -->
{block name="css"}{/block}
<!-- JS -->
{block name="js"}
<script type="text/javascript" src="__STATIC__/lib/simpleupload/simpleUpload.min.js"></script>
{/block}
{block name="jscode"}
<script type="text/javascript">
$(document).ready(function() {
    $("[data-simple-upload]").click(function(event) {
        var btnObj = $(this);
        var inputName = $(this).data('input-name');
        var settings = { uploadUrl: "{:url('/upload/image')}", };

        var startFunc = function(file) { sxj.loading(); }

        // 回调函数
        var successFunc = function(response) {
            sxj.msg_success('文件上传成功');
            var data = response.data;
            console.log("upload successful!");
            $("input[name=" + inputName + "]").val(data.file_path)
        }

        // 调用上传插件
        sxj.upload(settings, successFunc, startFunc);
    });

    $("#upload-image").click(function(event) {
        var uploadList = $("#upload-list");
        var settings = {
            uploadUrl: "{:url('/upload/image')}",
            multiple: true,
            limit: 10
        };

        // 文件开始上传
        var startFunc = function(file) { sxj.loading(); }

        // 文件上传成功后的回调函数
        var successFunc = function(response) {
            console.log("upload successful!");
            var data = response.data;
            if (response.code == 1) {
                sxj.msg_success(data['file_name'] + ' 上传成功');
                var el = $(`<div class="col-sm-3 col-xs-6">
                    <div class="card">
                        <div class="media-wrapper"><img src="__STATIC__/images/5x3.png" class="img-bg"></div>
                        <div><input type="text" class="form-control input-sm" name="file_name" value=""></div>
                        <div class="card-content">
                            <span class="pull-right">大小：<b class="file_size">0 Kb</b></span>
                            后缀：<b class="file_ext">jpg</b>
                        </div>
                    </div>
                </div>`);
                el.find(".img-bg").css('background-image', "url('" + data['file_path'] + "')");
                el.find("input[name='file_name']").val(data['file_name']);
                el.find(".file_size").html(data['file_size']);
                el.find(".file_ext").html(data['file_ext']);
                uploadList.append(el);
            } else {
                sxj.msg_error(response.msg);
            }
        }

        // 调用上传插件
        sxj.upload(settings, successFunc, startFunc);
    });

});
</script>
{/block}
<!-- 具体内容 -->
{block name="content"}
<h2 class="header-dividing">文件上传</h2>
<div class="container">
    <div class="panel">
        <div class="panel-body">
            <div class="col-md-3">
                <div class="input-group">
                    <input type="text" class="form-control" name="image1">
                    <span class="input-group-btn">
                        <button type="button" class="btn" data-simple-upload data-input-name="image1">上传</button>
                        <button type="button" class="btn" data-simple-resource>资源</button>
                    </span>
                </div>
            </div>
            <div class="col-md-3">
                <div class="input-group">
                    <input type="text" class="form-control" name="image2">
                    <span class="input-group-btn">
                        <button type="button" class="btn" data-simple-upload data-input-name="image2">上传</button>
                    </span>
                </div>
            </div>
            <div class="col-md-3">
                <button type="button" class="btn btn-primary" data-size="lg" data-remote="{:url('/upload')}" data-title="资源选取" data-toggle="modal">Ajax对话框</button>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="panel upload-list">
        <div class="panel-body" id="upload-list">
            <div class="col-sm-3 col-xs-6">
                <input type="hidden" value="/uploads/20200222/5e510aaaa613c.jpg">
                <input type="hidden" value="jpg">
                <input type="hidden" value="238 Kb">
                <div class="card">
                    <div class="media-wrapper"><img src="__STATIC__/images/5x3.png" class="img-bg" style="background-image: url('/uploads/20200222/5e510aaaa613c.jpg');"></div>
                    <div><input type="text" class="form-control input-sm" name="" value="良辰美景"></div>
                    <div class="card-content"><span class="pull-right">大小：<b class="file_size">238 Kb</b></span>后缀：<b class="file_ext">jpg</b></div>
                </div>
            </div>
        </div>
        <div class="panel-footer">
            <a id="upload-image"> <i class="icon icon-plus"></i> 选择文件</a>
        </div>
    </div>
</div>
<div class="container">
    <div class="panel">
        <div class="panel-body">
            <h2>JS 配置</h2>
            <pre>
var setting = {
    uploadUrl: '/uploads.html',
    accept: 'image/*', // 限制允许的文件类型 input
    multiple: false, // 允许多选
    data: {}, // 附带数据

    limit: 0, // 允许上传文件数量 0 不限制
    allowedExts: [], // 允许上传后缀 "jpg", "jpeg", "png", "gif"
    allowedTypes: [], // 允许上传类型 "image/pjpeg", "image/jpeg", "image/png", "image/x-png", "image/gif", "image/x-gif"
    maxFileSize: 10 * 1024 * 1024, // 10MB
};</pre>
            <h2>JS 代码 / HTML 代码</h2>
            <pre>参数当前页源码 </pre>
            <h2>PHP 配置 upload.php</h2>
            <pre>
return array(
    'path' => '/uploads',
    'image' => [
        'size' => 10 * 1024 * 1024,
        'ext' => 'jpg,jpeg,png,gif',
        'type' => 'image/pjpeg,image/jpeg,image/png,image/x-png,image/gif,image/x-gif',
    ],
    'file' =>[
        'size' => 10 * 1024 * 1024,
        'ext' => 'jpg,jpeg,png,gif,txt,zip,pdf',
        'type' => 'image/jpg,image/jpeg,image/png,image/gif,text/plain,application/zip,application/pdf',
    ],
    'theme' => [
        'size' => 10 * 1024 * 1024,
        'ext' => 'zip',
        'type' => 'application/zip',
    ],
);</pre>
            文件类型对照表：<a href="http://tools.jb51.net/table/http_content_type" target="_blank">HTTP Content-type 对照表</a>
        </div>
    </div>
</div>
{/block}